<template>
  <div class="container with-nav-padding">
    <div class="addr-panel">
      <div class="addr-cell with-grey-bottom-border">
        <div class="header">收货人</div>
        <input v-model="realname" type="text" />
      </div>
      <div class="addr-cell with-grey-bottom-border">
        <div class="header">手机号</div>
        <input v-model="mobile" type="number" />
      </div>
      <div
        @click="showAddrSelect = true"
        class="addr-cell with-grey-bottom-border"
      >
        <div class="header">所在地区</div>
        <input
          style="padding-left:0.48rem;"
          type="text"
          v-model="addrStr"
          readonly
          placeholder=""
        />

        <div class="right-btn"></div>
      </div>
      <textarea
        placeholder="详细地址：如道路、门牌号、小区、楼栋号、单元室等"
        name=""
        id=""
        v-model="detail"
      ></textarea>
    </div>
    <div class="addr-cell">
      <div class="header">设为默认地址</div>
      <div
        @click="isDefault = !isDefault"
        :class="{ 'default-btn': true, 'btn-active': isDefault }"
      >
        <div :class="{ circle: true, active: isDefault }"></div>
      </div>
    </div>
    <yd-cityselect v-model="showAddrSelect" :callback="result" :items="district"
      >{{ addrStr }}
    </yd-cityselect>
    <div
      class="bottom-bar"
      :class="{ 'fullscreen-bottom-style': isFullscreen }"
    >
      <button class="delete" @click="deleteAddr" v-if="mode === 2" :style="{background: subColor}">
        删 除
      </button>
      <button
        @click="save"
        class="save"
        :style="{ width: mode === 1 ? '100%' : '50%', background: mainColor}"
      >
        保 存
      </button>
    </div>
  </div>
</template>

<script>
import { addAddr, getAddrById, deleteAddrById } from "@/api/profile";
import District from "@/utils/citys.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      showAddrSelect: false,
      district: District,
      mode: 1, //1新增 2修改
      addrStr: "",
      addrId: "",
      realname: "",
      mobile: "",
      detail: "",
      isDefault: false,
      id: null
    };
  },
  computed: {
    ...mapState({
      isFullscreen: state => state.app.isFullscreen,
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor
    })
  },
  methods: {
    result(ret) {
      this.addrStr = ret.itemName1 + " " + ret.itemName2 + " " + ret.itemName3;
      this.addrId =
        ret.itemValue1 + "," + ret.itemValue2 + "," + ret.itemValue3;
    },
    save() {
      if (!this.realname) {
        this.$dialog.toast({
          mes: "请填写姓名",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.mobile) {
        this.$dialog.toast({
          mes: "请填写手机号",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.detail) {
        this.$dialog.toast({
          mes: "请填写地址详情",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      if (!this.addrStr || !this.addrId) {
        this.$dialog.toast({
          mes: "请选择省市区",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      let obj = {
        detail: this.detail,
        mobile: this.mobile,
        realname: this.realname,
        province: this.addrId.split(",")[0],
        city: this.addrId.split(",")[1],
        prefecture: this.addrId.split(",")[2],
        is_default: this.isDefault,
        city_str: this.addrStr
      };
      if (this.mode === 2) {
        obj.id = this.id;
      }
      addAddr(obj).then(res => {
        if (res.status === 200) {
          this.$dialog.toast({
            mes: this.mode === 1 ? "添加成功" : "保存成功",
            timeout: 1500,
            icon: "success",
            callback: () => {
              this.$router.go(-1);
            }
          });
        }
      });
    },
    deleteAddr() {
      deleteAddrById({ id: this.id }).then(res => {
        if (res.status === 200) {
          this.$dialog.toast({
            mes: "删除成功",
            timeout: 1500,
            icon: "success",
            callback: () => {
              this.$router.go(-1);
            }
          });
        }
      });
    }
  },
  created() {
    this.mode = this.$route.query.addrId ? 2 : 1;
    if (this.$route.query.addrId) {
      getAddrById({ id: this.$route.query.addrId }).then(res => {
        if (res.status === 200) {
          this.addrStr = res.data.data.city_str;
          this.addrId =
            res.data.data.province +
            "," +
            res.data.data.city +
            "," +
            res.data.data.prefecture;
          this.realname = res.data.data.realname;
          this.mobile = res.data.data.mobile;
          this.isDefault = res.data.data.is_default;
          this.detail = res.data.data.detail;
          this.id = res.data.data.id;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .addr-panel {
    margin: 0.48rem 0;
    background: #fff;

    textarea {
      padding: 0.5rem 3.2%;
      height: 3rem;
      width: 100%;
      border: none;
      font-size: 0.56rem;
      margin-bottom: 0.48rem;
    }
  }

  .addr-cell {
    height: 2rem;
    line-height: 2rem;
    display: flex;
    justify-content: space-between;
    color: #444444;
    font-size: 0.64rem;
    padding: 0 3.2%;
    background: #fff;

    input {
      height: 2rem;
      border: none;
      background: none;
      width: 75%;
    }

    .right-btn {
      width: 0.8rem;
      background-image: url("../../assets/发视频-assets/next.png");
      background-size: 0.28rem 0.52rem;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }

    .default-btn {
      margin-top: 0.5rem;
      width: 2rem;
      height: 1rem;
      border: 1px solid #dfdfdf;
      border-radius: 0.5rem;
      transition-duration: 0.2s;

      .circle {
        width: 0.95rem;
        height: 0.95rem;
        border-radius: 50%;
        background: #fff;
        transition-duration: 0.2s;
        box-shadow: 0 1px 5px #aaaaaa;
      }

      .active {
        transform: translateX(1rem);
      }
    }

    .btn-active {
      background: #f85859;
    }
  }

  .bottom-bar {
    position: fixed;
    width: 100%;
    line-height: 2rem;
    left: 0;
    bottom: 0;
    background: #fff;

    button {
      font-size: 0.64rem;
      font-weight: bold;
      border: none;
      width: 50%;
      height: 2rem;
    }

    .delete {
      background: rgba(233, 233, 233, 1);
      color: #444444;
    }

    .save {
      color: #fff;
      background: rgba(0, 120, 255, 1);
    }
  }
}
</style>
